<template>
  <!-- 用户登录日志 -->
    <el-card>
        <el-card >
            <div>
                <!--小标题  -->
                <span class="panel-title home-title">{{ $t("m.User_Session") }}</span>
                <!-- 行 -->
                <div class="filter-row">
                    <!-- 用户名 -->
                    <span>
            <vxe-input
                    v-model="userName"
                    :placeholder="$t('m.User_Name')"
                    type="search"
                    size="medium"
                    @search-click="filterByKeyword"
                    @keyup.enter.native="filterByKeyword"
            ></vxe-input>
          </span>
                    &nbsp;
                </div>
            </div>
        </el-card>
        <!-- table表格 -->
        <el-card style="margin-top: 20px " v-loading="loading">
            <vxe-table :data="sessionList" :align="center" style="text-align: center">
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column
                        field="username"
                        :title="$t('m.User_Name')"
                ></vxe-table-column>
                <vxe-table-column
                        field="agent"
                        :title="$t('m.Agent')"
                ></vxe-table-column>
                <vxe-table-column
                        field="ip"
                        :title="$t('m.IP')"
                ></vxe-table-column>
                <vxe-table-column
                        field="address"
                        :title="$t('m.Address')"
                ></vxe-table-column>
                <vxe-table-column
                        :title="$t('m.Operation')">
                    <template v-slot="{ row }">
                        <el-button type="warning" size="mini" @click="forcedOffline(row.username)">强制下线</el-button>
                    </template>

                </vxe-table-column>
                <vxe-table-column
                        field="gmtCreate"
                        :formatter="formatDate"
                        :title="$t('m.Create_Time')"
                ></vxe-table-column>
            </vxe-table>
            <Pagination
                    :total="total"
                    :page-size="limit"
                    @on-change="getUserSessionList"
                    :current.sync="page"
                    @on-page-size-change="filterByKeyword"
                    :layout="'prev, pager, next, sizes'"
            ></Pagination>
        </el-card>
    </el-card>

</template>

<script>
import api from "@/common/api";
import XEUtils from 'xe-utils'
import myMessage from '@/common/message';

export default {
    name: "session",
    components: {},
    data() {
        return {
            userName: "", //用户名,支持模糊搜索
            page: 1, //页数
            limit: 10, //限制
            total: 0, //总页数
            sessionList: [], //登录信息数据列表
            loading: false
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.filterByKeyword();
        },

        //格式化时间
        formatDate({cellValue}) {
            return XEUtils.toDateString(cellValue, "yyyy/MM/dd HH:mm:ss");
        },

        //获取用户登录列表
        getUserSessionList(page) {
            this.loading = true;
            let params = {
                currentPage: page,
                limit: this.limit,
                userName: this.userName.length > 0 ? this.userName : null,
            };

            api.getUserSessions(params).then(
                (res) => {
                    console.log(res);
                    this.loading = false;
                    this.total = res.data.data.total;
                    this.sessionList = res.data.data.records;
                    console.log(this.sessionList);
                    this.showPagination = true;
                },
                (err) => {
                    this.loading = false;
                    this.showPagination = true;
                }
            );
        },
        forcedOffline(username){
            api.forcedOffline(username).then(
                (res)=>{
                    myMessage.success(this.$t('m.Delete_successfully'));
                    this.init();
                }
            )
        },

        //按钮筛选
        filterByKeyword() {
            this.page = 1;
            this.getUserSessionList(this.page);
        },
    },
    watch: {
        $route() {
            this.init();
        },
    },
    computed: {},
};
</script>

<style scoped>
</style>
